<!-- 这个组件没用到 -->
<template lang="pug">
div
  g-h(v-if="isLoading" j-c="center" a-i="center")
    icon-loading.loading

  table.table(v-else-if="body")
    thead.thead
      tr
        th.th.fixed-row(
            v-for="(item, i) in headList"
            :key="i"
            v-if="item.checked"
            :class="{fixed: i === 0}"
            ) {{ item.title }}
    tbody.tbody(v-if="body.list")
      tr(
          v-for="(row, i) in body.list"
          :key="i"
          @click="$emit('click-row', row)"
          )
        td.td(
            v-for="(field, j) in checkedHeadList"
            :key="j"
            :rowspan="rowspan(i, field)"
            :class="{'fixed-column': j === 0}"
            )
          template(v-if="row[field] != undefined")
            input.input(
                v-if="inputHeader[field]"
                v-model="row[field]"
                @click.stop=""
                @blur="$emit('check-input', row[field])"
                :disabled="disabled"
                )
            div(v-else) {{ row[field] }}
          div(v-else)
</template>

<script>
export default {
  name: "BetterStatTable",
  props: {
    /* 
      [
        { field: "name", title: "合同名称", checked: true, isInput: true },
        { field: "id", title: "合同ID", checked: false },
        { field: "code", title: "合同编号", checked: true },
      ]
    */
    headList: {
      type: Array,
      default: () => [],
    },

    /* 
      {
        spanTable: [
          { userRealName: 3, proName: 3 },
          {},
        ],
        list: [
          { userRealName: "", id: 123 },
        ],
      }
    */
    body: {
      type: Object,
      default: () => {},
    },

    isLoading: {
      type: Boolean,
      default: false,
    },

    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    }
  },
  computed: {
    checkedHeadList() {
      let checked = []
      for (let item of this.headList) {
        if (item.checked) {
          checked.push(item.field)
        }
      }
      return checked
    },
    inputHeader() {
      let m = {}
      for (let item of this.headList) {
        if (item.isInput) {
          m[item.field] = true
        }
      }
      return m
    },
  },
  methods: {
    rowspan(row, field) {
      if (this.body.spanTable) {
        let m = this.body.spanTable[row]
        if (m[field]) {
          return m[field]
        } else {
          return 1
        }
      } else {
        return 1
      }
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  height: 100%
  overflow: scroll
  &::-webkit-scrollbar
    display: none

.loading
  margin: 0.5rem 0

.table
  table-layout: fixed
  border-collapse: collapse
  box-shadow: 0 1px 5px grey500

.th
  color: grey600

.th, .td
  padding: 0.5rem 1rem
  max-width: 10rem
  text-align: center
  text-ellipsis()
  // border: 1px solid grey300
  // white-space: nowrap

.input
  width: 100%
  text-align: end

.thead .fixed-row
  position: sticky
  top: 0
  background: white

.tbody .fixed-column
  position: sticky
  left: 0
  background: white

.fixed
  left: 0
  z-index: 1

</style>
